<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS图片水平居中的方法</title>
    <style>

        /* 参考： https://www.cnblogs.com/Julia-Yuan/p/6648816.html 
                让一个不定宽高的div水平居中，垂直居中： https://blog.csdn.net/baidu_38609334/article/details/81025238
            经典的4中方式： 主要是以绝对定位的方式为主https://www.php.cn/css-tutorial-409962.html
        */
        /* 第一种 */
        .dv1 {
            width: 500px;
            border: 2px solid darkgray;
        }
        .dv1 img {
            display: block;
            margin: 0 auto;
        }

        /* 第二种 */
        .dv2 {
            width: 500px;
            border: 2px solid darkgray;
            text-align: center;
        }

        
    </style>
</head>
<body>
    <!-- 两种： 1. 使用margin:0 auto的方法
                2. 使用文本的水平居中属性 text-align: center -->

    <div class="dv1">
        <img src="http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png" alt="">
    </div>

    <div class="dv2">
        <img src="http://img1.qunarzz.com/piao/fusion/1803/47/c2b659e048b11602.png" alt="">
    </div>
    
    
    
</body>
</html>